<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vhall Stream Saver</title>
  <link rel="stylesheet" href="popup.css">
</head>
<body>
  <div class="container">
    <!-- Header -->
    <header class="header">
      <div class="logo">
        <img src="icons/icon32.png" alt="Vhall Stream Saver" class="logo-icon">
        <h1 class="title">微流下载器</h1>
      </div>
      <div class="actions">
        <button id="refreshBtn" class="btn btn-icon" title="刷新">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <polyline points="23 4 23 10 17 10"></polyline>
            <polyline points="1 20 1 14 7 14"></polyline>
            <path d="m3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"></path>
          </svg>
        </button>
        <button id="settingsBtn" class="btn btn-icon" title="设置">
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <circle cx="12" cy="12" r="3"></circle>
            <path d="m12 1 1.68 2.32L16 4l.68 2.32L19 8l-.32 1.68L20 12l-1.32 1.68L19 16l-2.32.68L15 19l-1.68-.32L12 20l-1.68-1.32L8 19l-.68-2.32L5 16l.32-1.68L4 12l1.32-1.68L5 8l2.32-.68L9 5l1.68.32L12 1z"></path>
          </svg>
        </button>
      </div>
    </header>

    <!-- Status Bar -->
    <div class="status-bar">
      <div class="status-info">
        <span id="streamCount" class="stream-count">0</span>
        <span class="status-text">个检测到的流</span>
      </div>
      <div class="native-status">
        <span id="nativeStatus" class="native-indicator">检查中...</span>
      </div>
    </div>

    <!-- Stream List -->
    <div class="stream-list-container">
      <div id="emptyState" class="empty-state">
        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" class="empty-icon">
          <path d="m22 8-6 4 6 4V8Z"></path>
          <rect width="14" height="12" x="2" y="6" rx="2" ry="2"></rect>
        </svg>
        <h3>未检测到视频流</h3>
        <p>请访问微吼直播页面，插件将自动检测可下载的视频流</p>
        <button id="helpBtn" class="btn btn-secondary">使用帮助</button>
      </div>

      <div id="streamList" class="stream-list hidden">
        <!-- 动态生成的流列表 -->
      </div>
    </div>

    <!-- Actions -->
    <div class="actions-bar">
      <button id="clearAllBtn" class="btn btn-secondary">清空列表</button>
      <button id="downloadManagerBtn" class="btn btn-primary">下载管理</button>
    </div>
  </div>

  <!-- Loading Overlay -->
  <div id="loadingOverlay" class="loading-overlay hidden">
    <div class="loading-spinner"></div>
    <p class="loading-text">正在处理...</p>
  </div>

  <!-- Toast Container -->
  <div id="toastContainer" class="toast-container"></div>

  <script src="popup.js"></script>
</body>
</html>